<template>
    <div id="found">
        <!-- 搜索栏 -->
        <transition>
            <div class="scrollDown" v-show="isShow">
                <input
                    type="text"
                    placeholder="请输入"
                    @click="this.$router.push('/search/searchindex')"
                />
            </div>
        </transition>
        <!-- 导航栏 -->
        <div class="title">
            <p @click="checked = true" :class="{ change: checked }">店铺</p>
            <p @click="checked = !checked" :class="{ change: !checked }">
                商品
            </p>
        </div>
        <!-- 顶部筛选栏 -->
        <transition>
            <div class="chosen" :class="{ fix: watch }">
                <p @click="num = 1" :class="{ active: num == 1 }">综合⏷</p>
                <p @click="num = 2" :class="{ active: num == 2 }">销量⏷</p>
                <p @click="gun">
                    <i :class="{ active: num == 3 }">价格</i>
                    <span :class="{ active: num == 3 && flag }">⏶</span>
                    <span :class="{ active: num == 3 && !flag }">⏷</span>
                </p>
                <p @click="show1 = true">筛选</p>
                <!-- 侧边弹出栏 -->
                <nut-popup
                    position="right"
                    v-model:visible="show1"
                    :style="{ width, height }"
                    lock-scroll="true"
                >
                    <div class="select-list">
                        <h1>筛选</h1>
                        <div class="price">
                            <p class="title">价格区间</p>
                            <nut-cell :style="{ padding: '40px 18px' }">
                                <nut-range
                                    range
                                    v-model="value"
                                    max="1000"
                                ></nut-range>
                            </nut-cell>
                        </div>
                        <div class="brand">
                            <p class="title">品牌</p>
                            <ul>
                                <li
                                    @click="sth = 1"
                                    :class="{ active: sth == 1 }"
                                >
                                    Vitafushion
                                </li>
                                <li
                                    @click="sth = 2"
                                    :class="{ active: sth == 2 }"
                                >
                                    POLA
                                </li>
                                <li
                                    @click="sth = 3"
                                    :class="{ active: sth == 3 }"
                                >
                                    Swisse
                                </li>
                                <li
                                    @click="sth = 4"
                                    :class="{ active: sth == 4 }"
                                >
                                    FANCL
                                </li>
                                <li
                                    @click="sth = 5"
                                    :class="{ active: sth == 5 }"
                                >
                                    DHC
                                </li>
                                <li
                                    @click="sth = 6"
                                    :class="{ active: sth == 6 }"
                                >
                                    卓雅
                                </li>
                            </ul>
                        </div>

                        <div class="sale-service">
                            <p class="title">折扣和服务</p>
                            <!-- 冒泡点击 添加类名 -->
                            <ul @click="Click">
                                <li>包邮</li>
                                <li>免税</li>
                                <li>7+天内退货</li>
                                <li>折扣</li>
                                <li>全球购</li>
                                <li>满赠</li>
                            </ul>
                        </div>
                        <div class="double-button">
                            <p>重置</p>
                            <p>确定</p>
                        </div>
                    </div>
                </nut-popup>
            </div>
        </transition>
        <!-- 商品列表模块 -->
        <div class="recommendList">
            <div
                class="recommends"
                v-for="item in [...renderList, ...renderList]"
                :key="item.id"
            >
                <router-link to="/GoodsDetails">
                    <img :src="item.s_goods_photos[0].path" />
                    <div>
                        <h3>
                            {{ item.name }}
                        </h3>
                        <span>满300减30</span>
                        <span>店铺领券</span>
                        <p>￥{{ item.price }}</p>
                    </div>
                </router-link>
            </div>
        </div>
        <!--没有更多提示-->
        <p class="tip">没有更多了哦~</p>
    </div>
</template>

<script>
import { ref } from "vue";
import { mapState, mapActions } from "vuex";

export default {
    data() {
        return {
            show1: false,
            //   遮盖层占比率
            width: "70%",
            height: "100%",
            //   侧边栏 价格区间
            value: ref([200, 800]),
            //   头部选项
            checked: true,
            //   头部筛选栏
            num: 0,
            flag: false,
            //   产品列表数据渲染
            //   goodsList: [],
            //   筛选栏选择
            getClick: false,
            sth: 0,
            //   导航栏显示隐藏
            isShow: false,
            //   顶部筛选栏
            watch: false,
        };
    },
    mounted() {
        console.log(this.foundProductList);
        // this.goodsList = this.$store.state.productList
        // console.log(this.goodsList);
        // 获取商品列表数据
        this.getGoodsListData();
        window.addEventListener("scroll", this.showNav);
    },
    methods: {
        gun() {
            this.num = 3;
            this.flag = !this.flag;
        },
        Click(e) {
            e.target.classList.add("active");
        },
        showNav() {
            if (window.pageYOffset > 100) {
                this.isShow = true;
                this.watch = true;
            } else {
                this.isShow = false;
                this.watch = false;
            }
        },
        ...mapActions(["getGoodsListData"]),
    },

    computed: {
        ...mapState(["goodsList", "foundProductList"]),
        // 动态渲染结构的列表
        renderList() {
            if (this.foundProductList.length == 0) {
                return this.goodsList;
            } else {
                return this.foundProductList;
            }
        },
    },
    beforeUnmount() {
        //   销毁window全局监听
        window.removeEventListener("scroll", this.showNav);
    },
};
</script>

<style lang="scss" scoped>
.v-leave-from,
.v-enter-to {
    opacity: 1;
}
.v-leave-to,
.v-enter-from {
    opacity: 0;
}
.v-leave-active,
.v-enter-active {
    transition: all 0.2s;
}

#found {
    background-color: #c1ab96;
    //   下拉搜索栏样式
    .scrollDown {
        position: fixed;
        top: 0;
        background-color: #fff;
        display: flex;
        align-items: center;
        width: 100%;
        padding: 9px 16px;
        background: #fff;
        box-sizing: border-box;
        z-index: 999;
        input {
            width: 235px;
            height: 32px;
            border: none;
            display: flex;
            align-items: center;
            flex: 1;
            padding: 0 0 0 13px;
            border-radius: 16px;
            box-shadow: 0 0 8px #0000000a;
            background: #eae9e5;
        }
    }
    .title {
        width: 100%;
        height: 9.333vw;
        box-sizing: border-box;
        padding: 0vw 9.333vw;
        background-color: #eae9e5;
        display: flex;
        p {
            margin-right: 10.667vw;
            box-sizing: border-box;
            text-align: center;
            line-height: 9.333vw;
            width: 12vw;
            height: 100%;
        }
        .change {
            color: #c1ab96;
            border-bottom: #c1ab96 0.65vw solid;
        }
    }
    .chosen {
        width: 100%;
        height: 9.333vw;
        box-sizing: border-box;
        padding-left: 4.6vw;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        p {
            width: 14.467vw;
            height: 50%;
            &:last-of-type {
                text-align: right;
                border-left: #999999 1px solid;
            }
        }
        span {
            display: inline-block;
            height: 3.7vw;
            &:nth-of-type(1) {
                transform: translate(0.4vw, -0.8vw);
            }
            &:nth-of-type(2) {
                transform: translate(-2.8vw, 0.8vw);
            }
        }
        .active {
            color: #c1ab96;
        }
    }
    .fix {
        position: fixed;
        top: 13.067vw;
    }
    .recommendList {
        width: 92vw;
        margin: 0 auto;
        padding-top: 5.333vw;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .recommends {
            background-color: #f2f2f2;
            width: 44vw;
            height: 69.333vw;
            border-radius: 1.333vw;
            margin-bottom: 3.467vw;
            box-shadow: rgba(0, 0, 0, 0.19) 0px 2.667vw 5.333vw,
                rgba(0, 0, 0, 0.23) 0px 1.6vw 1.6vw;
            img {
                width: 44vw;
                height: 44vw;
                border-radius: 2.667vw;
                background-color: darkorchid;
            }
            div {
                box-sizing: border-box;
                margin: 0.8vw 3.2vw 0 3.2vw;
                h3 {
                    overflow: hidden;
                    line-height: 1.3;
                    font-size: 3.733vw;
                    height: 9.6vw;
                    margin-bottom: 1.067vw;
                }
                span {
                    display: inline-block;
                    font-size: 2.667vw;
                    border-radius: 1vw;
                    margin-bottom: 0.8vw;
                    color: #8e7e6f;
                    border: #8e7e6f 0.4vw solid;
                    &:nth-of-type(1) {
                        border-right: 0;
                    }
                    &:nth-of-type(2) {
                        border-left: #8e7e6f 0.4vw dashed;
                    }
                }
                p {
                    font-size: 14px;
                    &:last-of-type {
                        font-weight: bolder;
                    }
                }
            }
        }
    }
}
.tip {
    margin: 0 auto;
    font-weight: bolder;
    color: #f2f2f2;
    line-height: 14.667vw;
    width: 26.667vw;
}
// 侧边栏（独立于found外）
.select-list {
    height: 100%;
    background-color: #fff;
    box-sizing: border-box;
    padding: 5.333vw 2.4vw 0vw 2.4vw;
    h1 {
        font-weight: bolder;
        font-size: 4.2vw;
        height: 10.667vw;
        line-height: 10.667vw;
        border-top: 0.267vw #eae9e5 solid;
    }
    .title {
        border-width: 0.267vw 0vw 0.267vw;
        border-style: solid;
        border-color: #eae9e5;
        line-height: 12vw;
        height: 12vw;
        width: 100%;
    }
    ::v-deep .nut-cell {
        .nut-range-button {
            background-color: #c1ab96;
            box-shadow: 0 1px 2px #00000026;
            border: 1px solid #eae9e5;
        }
        .nut-range {
            background-color: #c1ab96;
            .nut-range-bar {
                background: #c1ab96;
            }
        }
    }
    .nut-cell {
        .nut-range-button {
            background-color: #c1ab96;
            box-shadow: 0 1px 2px #00000026;
            border: 1px solid #eae9e5;
        }
        .nut-range {
            background-color: #c1ab96;
        }
    }
    .brand,
    .sale-service {
        ul {
            margin: 5.333vw auto;
            height: 21.333vw;
            display: flex;
            justify-content: space-between;
            align-content: space-between;
            flex-wrap: wrap;
            li {
                box-sizing: border-box;
                padding: 0 0.533vw;
                width: 18.933vw;
                height: 8.467vw;
                text-align: center;
                line-height: 8.467vw;
                background-color: #eae9e5;
                border-radius: 1.9vw;
            }
            .active {
                box-sizing: border-box;
                border: #c1ab96 1px solid;
                background-color: #fff;
                color: #c1ab96;
            }
        }
    }
}
.double-button {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 68vw;
    height: 11.733vw;
    display: flex;
    p {
        width: 50%;
        text-align: center;
        line-height: 11.733vw;
        &:nth-child(1) {
            border-top: #eae9e5 1px solid;
        }
        &:nth-child(2) {
            background-color: #c1ab96;
            color: white;
        }
    }
}
</style>